<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      余额
    </view>
    <view class="content">
      <image
        src="../../../static/PersonalCenter/qianbao.png"
        mode=""
        class="wallet"
      ></image>
      <view class="my">我的余额</view>
      <view class="money">￥{{ obj.money }}</view>
    </view>
    <view class="btn">
      <view class="recharge" @click="Recharge">充值</view>
      <view class="Withdrawal" @click="Withdrawal">提现</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      obj: {},
      userInfo: "",
    };
  },
  onShow() {
    this.token = uni.getStorageSync("token");
    if (this.token) {
      this.myWallet();
      this.getuserInfo();
    }
  },
  methods: {
    gobackClick() {
      uni.navigateBack({});
    },
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        header: {
          token: that.token,
        },
        data: {},
      });
      if (res.data.code == 1) {
        that.userInfo = res.data.data;
      }
    },
    // 我的钱包
    async myWallet() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/myWallet",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {},
      });
      if (res.data.code == 1) {
        that.obj = res.data.data;
      }
    },
    // 充值
    Recharge() {
      uni.navigateTo({
        url: "./Recharge",
      });
    },
    // 提现
    Withdrawal() {
      if (this.userInfo.mobile) {
        uni.navigateTo({
          url: "./Withdrawal?type=1",
        });
      } else {
        uni.navigateTo({
          url: "../binding/binding",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 88rpx;
  padding-top: 136rpx;
  border-top: 20rpx solid #f4f4f4;
  .wallet {
    width: 126rpx;
    height: 126rpx;
  }
  .my {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    text-align: center;
    margin-top: 60rpx;
  }
  .money {
    margin-top: 5rpx;
    text-align: center;
    font-size: 54rpx;
    font-weight: 500;
    color: #333333;
  }
}
.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recharge {
  width: 250rpx;
  background-color: #c52b2e;
  height: 66rpx;
  line-height: 66rpx;
  font-size: 30rpx;
  color: #ffffff;
  border-radius: 33rpx;
  margin-top: 360rpx;
  text-align: center;
}
.Withdrawal {
  width: 250rpx;
  height: 66rpx;
  line-height: 66rpx;
  background: #ffffff;
  font-size: 30rpx;
  color: #c52b2e;
  border-radius: 33rpx;
  margin-top: 20rpx;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #c52b2e;
}
</style>
